<template>
  <div class="app-container">
    <div class="nav-title">
      <a class="floatleft">
        <div class="nav-title-img">
          <el-button type="primary" icon="el-icon-s-order" circle></el-button>
        </div>
        <div class="nav-title-span">基本信息</div>
      </a>
      <a class="floatleft">
        <div class="nav-title-img">
          <el-button type="success" icon="el-icon-s-tools" circle></el-button>
        </div>
        <div class="nav-title-span">维修</div>
      </a>
      <a class="floatleft">
        <div class="nav-title-img">
          <el-button
            type="info"
            icon="el-icon-s-cooperation"
            circle
          ></el-button>
        </div>
        <div class="nav-title-span">保养</div>
      </a>
      <a class="floatleft">
        <div class="nav-title-img">
          <el-button type="warning" icon="el-icon-s-check" circle></el-button>
        </div>
        <div class="nav-title-span">巡检</div>
      </a>
      <a class="floatleft">
        <div class="nav-title-img">
          <el-button
            type="danger"
            icon="el-icon-s-management"
            circle
          ></el-button>
        </div>
        <div class="nav-title-span">备件</div>
      </a>
    </div>
    <!-- 基本信息 -->
    <div class="basic">
      <div class="basic-news border10">
        <form action="" method="post" id="addForm" class="form-horizontal">
          <div class="data" style="display: flex">
            <!--左侧数据 -->
            <div class="leftdata" style="width: 800px">
              <div class="form-group" style="position: relative">
                <div class="fh-subtitle" style="overflow: hidden">
                  基本信息
                  <div class="hide" style="float: right; margin-top: 7px">
                    <a
                      class="glyphicon glyphicon-search"
                      title="从已有设备复制"
                      onclick="copyDev()"
                    >
                    <el-popover
                      placement="left-start"
                      title="QRCode"
                      width="120"
                      trigger="hover">
                      <vue-qr :text="form.tagCode + ''" :size="120"></vue-qr>
                      <vue-qr :text="form.tagCode + ''" slot="reference" :size="30"></vue-qr>
                    </el-popover>
                      
                    </a>
                  </div>
                  <!-- <div class="apk-ma-little" style="float: right">
                        <div class="ewm" id="deviceSNCode">
                          <canvas width="90" height="90"></canvas>
                        </div>
                        <canvas width="30" height="30"></canvas>
                      </div> -->
                </div>
              </div>
              <div class="form-group">
                <table id="tab_table" class="border">
                  <tbody>
                    <tr>
                      <td><span>设备编号</span></td>
                      <td>
                        {{ form.id }}
                      </td>

                      <td><span>资产编号</span></td>
                      <td>
                        {{ form.assetNo }}
                      </td>

                      <td><span>序列号</span></td>
                      <td>
                        {{ form.serialNo }}
                      </td>
                    </tr>
                    <tr>
                      <td><span>设备名称</span></td>
                      <td>
                        {{ form.name }}
                      </td>
                      <td><span>电子标签码</span></td>
                      <td>
                        {{ form.tagCode }}
                      </td>
                      <td><span>单位</span></td>
                      <td>
                        {{ form.unit }}
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span>类别</span>
                      </td>
                      <td>
                        {{ form.eqType && form.eqType.name }}
                      </td>
                      <td>
                        <span>规格型号</span>
                      </td>
                      <td>
                        {{ form.specification }}
                      </td>
                      <td><span>品牌</span></td>
                      <td>
                        {{ form.brand }}
                      </td>
                    </tr>
                    <tr>
                      <td><span>入账方式</span></td>
                      <td></td>
                      <td><span>创建人</span></td>
                      <td>
                        {{ userNicknameFormat(parseInt(form.creator)) }}
                      </td>
                      <td><span>创建时间</span></td>
                      <td>
                        {{ parseTime(form.createTime) }}
                      </td>
                    </tr>
                    <tr>
                      <td><span>供应商</span></td>
                      <td colspan="3">
                        {{ form.supplier && form.supplier.name }}
                      </td>
                    </tr>
                    <tr>
                      <td><span>设备来源</span></td>
                      <td>
                        <dict-tag
                          :type="DICT_TYPE.EMS_EQUIPMENT_SOURCE"
                          :value="form.source"
                        />
                      </td>
                      <td><span>采购金额</span></td>
                      <td>
                        {{ form.purchaseAmount == null ? null : parseFloat(form.purchaseAmount / 100).toFixed(2) + '元' }}
                      </td>
                      <td><span>购置日期</span></td>
                      <td>
                        {{ parseTime(form.purchaseDate) }}
                      </td>
                    </tr>
                    <tr>
                      <td><span>保修期至</span></td>
                      <td>
                        {{ parseTime(form.warrantyPeriod) }}
                      </td>
                      <td><span>启用日期</span></td>
                      <td>
                        {{ parseTime(form.enableTime) }}
                      </td>
                      <td><span>预计报废日期</span></td>
                      <td>
                        {{ parseTime(form.estimatedLife) }}
                      </td>
                    </tr>
                    <tr>
                      <td><span>设备状态</span></td>
                      <td>
                        <dict-tag
                          :type="DICT_TYPE.EMS_EQUIPMENT_STATUS"
                          :value="form.eqStatus"
                        />
                      </td>
                      <td><span>使用状态</span></td>
                      <td>
                        <dict-tag
                          :type="DICT_TYPE.EMS_EQUIPMENT_STATUS"
                          :value="form.usageStatus"
                        />
                      </td>
                      <td><span>设备等级</span></td>
                      <td>
                        <dict-tag
                          :type="DICT_TYPE.EMS_EQUIPMENT_STATUS"
                          :value="form.level"
                        />
                      </td>
                    </tr>
                    <tr>
                      <td><span>负责人</span></td>
                      <td colspan="5">
                        {{ userNicknameFormat(form.personLiable) }}
                      </td>
                    </tr>
                    <tr>
                      <td><span>所属部门</span></td>
                      <td colspan="5">
                        {{ deptNameFormat(form.deptId) }}
                      </td>
                    </tr>
                    <tr>
                      <td><span>技术参数</span></td>
                      <td colspan="5">
                        <el-input
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4 }"
                          v-model="form.parameter"
                        >
                        </el-input>
                      </td>
                    </tr>
                    <tr>
                      <td><span>备注</span></td>
                      <td colspan="5">
                        <el-input
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4 }"
                          v-model="form.remarks"
                        >
                        </el-input>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <div style="clear: both"></div>
              </div>
              <div class="fh-subtitle">设备图片</div>
              <div class="form-group ">
                <div class="single-component-form-control display-inline-block vertical-align-center" style="width: 100% !important;">
                  <div class="file-name-container-left form-control" style="height: auto; min-height: 34px; width: 100%; overflow: hidden;">
                    
                      <el-image 
                        style="width: 100px; height: 100px"
                        :src="form.image" 
                        :preview-src-list="imgUrlList">
                      </el-image>
                    
                    <div class="enlarge"></div>
                  </div>
                </div>
              </div>
            </div>
            <!--右侧数据 -->
            <div id="rightdata" class="rightdata" style="flex: 1">
              <div class="fh-subtitle">子设备</div>
              <div class="form-group">
                <el-table :data="form.sons" style="width: 100%">
                  <el-table-column prop="id" label="设备编号" width="180">
                    <template slot-scope="scope">
                      <router-link :to="'/ems/eq/detail?id=' + scope.row.id">
                        <el-link type="primary" @click="handleLink(scope.row.id)">
                          <b>{{ scope.row.id }}</b>
                        </el-link>
                      </router-link>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="设备名称" width="180">
                  </el-table-column>
                  <el-table-column prop="brand" label="品牌" width="180">
                  </el-table-column>
                  <el-table-column prop="specification" label="规格型号">
                  </el-table-column>
                </el-table>
              </div>
              <div class="fh-subtitle">父设备</div>
              <div class="form-group">
                <el-table :data="form.parents" style="width: 100%">
                  <el-table-column prop="id" label="设备编号" width="180">
                    <template slot-scope="scope">
                      <router-link :to="'/ems/eq/detail?id=' + scope.row.id">
                        <el-link type="primary" @click="handleLink(scope.row.id)">
                          <b>{{ scope.row.id }}</b>
                        </el-link>
                      </router-link>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="设备名称" width="180">
                  </el-table-column>
                  <el-table-column prop="brand" label="品牌" width="180">
                  </el-table-column>
                  <el-table-column prop="specification" label="规格型号">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  createEquipment,
  updateEquipment,
  deleteEquipment,
  getEquipment,
  getEquipmentPage,
  exportEquipmentExcel,
  listSimpleEquipments,
} from "@/api/ems/equipment";
import { getDictDatas, DICT_TYPE } from "@/utils/dict";
import { listSimpleUsers } from "@/api/system/user";
import { listSimpleDepts, listDept } from "@/api/system/dept";
import { listSimpleEqTypes } from "@/api/ems/eqType";
import { listSimpleSuppliers } from "@/api/ems/supplier";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import "@/assets/styles/device.css";
import "@/assets/styles/dtable.css";
import VueQr from 'vue-qr'

export default {
  name: "Equipment",
  components: { Treeselect, VueQr },
  data() {
    return {
      form: [],
      depts: [],
      users: [],
      imgUrlList: [],
    };
  },
  created() {
    // 获得用户列表
    listSimpleUsers().then((response) => {
      this.users = response.data;
    });
    listDept().then((response) => {
      this.depts = response.data;
    });
    this.imgUrlList.push(this.imgUrl);
  },
  mounted() {
    const eqId = this.$route.query && this.$route.query.id;
    getEquipment(eqId).then((response) => {
      this.form = response.data;
      this.imgUrlList = [];
      this.imgUrlList.push(response.data.image);
    });
  },
  methods: {
    // 部门展示
    deptNameFormat(deptId) {
      if (!deptId) {
        return "未设置";
      }
      for (const dept of this.depts) {
        if (deptId === dept.id) {
          return dept.name;
        }
      }
      return "未知【" + deptId + "】";
    },
    // 用户昵称展示
    userNicknameFormat(id) {
      if (!id) {
        return "未设置";
      }
      for (const user of this.users) {
        if (id === user.id) {
          return user.nickname;
        }
      }
      return "未知【" + id + "】";
    },
    // 点击跳转
    handleLink(link) {
      getEquipment(link).then((response) => {
        this.form = response.data;
        this.imgUrlList = []
        this.imgUrlList.push(response.data.image);
      });
    },
  },
};
</script>
<style lang="scss">
</style>